<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="created" content="2019-03-16T06:18:10.521000000">
    <meta name="changed" content="2021-05-21T17:10:43.962000000">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="en">
    <title>
      The Canvas
    </title>
    <link rel="stylesheet" type="text/css" href="../../style.css">
  </head>
  <body>
    <div class="maindiv">
      <h1>
        The Canvas
      </h1>
      <p>
        The <b class=reffig>canvas</b> is really the most visible part of Liogisim-evolution is where you draw your circuits and their symbol to finally simulate the operation.
      </p>
      <p align="center">
        <img src="../../../img-guide/tutorial-shot-labeled.png" alt="#########">
      </p>
      <p>
        It is composed of only a few elements:<br>
      </p>
      <p>
        <b>Horizontal and vertical scroll bars</b> : They work as in most programs, just drag the sliders to move the view to other parts of the drawing. They can also be manipulated from the keyboard or mouse with the following combinations:
      </p>
      <ul>
        <li><b class="tkeybd">Mouse wheel</b> or keys <b class="tkeybd">up/down arrow</b> : vertical scrolling
        </li>
        <li>
          <b class="tkeybd">Shift-Mouse wheel</b> or keys <b class="tkeybd">right/left arrow</b>: horizontal scrolling
        </li>
        <li>Key <b class="tkeybd">PgUp</b> : go to the top of the page
        </li>
        <li>Key <b class="tkeybd">PgDn</b> : go to bottom of page
        </li>
      </ul>
	  <p>
	    <b>Range indicators</b> when the schematic is larger than the display area of the indicators are displayed. The guides displayed in the corners and / or on the sides indicate the directions where the drawing extends. Below is an example of the indicators on the top of the page.
		<p align="center">
		<img class="notscal" src="../../../../img-guide/camvasguide.png" alt="#########">
		<p>
        <p><b>The centering button</b>  <img class="notscal" src="../../../../img-guide/canvasrecenter.png" alt="#########"> It places the center of the diagram in the center of the work surface.<br>
		
	  </p>
      <p>
	    <b>The zoom:</b> At the bottom left is the control of the zoom factor. You can change it by dragging the cursor or using one of the two buttons to the left and right of the rate or with <b class="tkeybd">Ctrl - mouse wheel</b> in the work area.
      </p>
      <p align="center">
        <img class="notscal" src="../../../../img-guide/zoom.png" alt="#########">
      </p>
      <p>
	    The button <b class="button"> 100% </b>:fits the zoom to display the diagram at its actual size.<br>
		The button <b class="button"> Auto </b>: fits the zoom so that the whole diagram is visible.<br>
        <b>The grid button :</b><img class=intxt src="../../../../img-guide/buttongrid.png" alt="#########"> On the right of the zoom, Toggle mode alternately <b>"grid displayed"</b> in the mode <b>"invisible grid"</b>.
      </p>
      <p>
        <b>Next:</b> <a href="gui-menu.html">The menus</a>.
      </p>
    </div>
  </body>
</html>
